<template>
  <button
    class="my-button"
    :class="[
    'my-button--' + type,
     size ? 'my-button--' + size : '' ,
     { round, disabled: disabled || loading, outline }
    ]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <i v-if="loading" class="my-icon--loading"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>

<script>
export default {
  name: "MyButton",
  props: {
    type: {
      type: String,
      default: "default",
    },
    size: String,
    round: Boolean,
    outline: Boolean,
    disabled: Boolean,
    loading: Boolean,
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    },
  },
};
</script>

<style lang="scss">
.my-button {
  display: inline-block;
  line-height: 1.5;
  padding: 11px 22px;
  font-size: 14px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  border: 1px solid #dcdfe6;
  position: relative;

  &.my-button--md {
    padding: 9px 18px;
    font-size: 14px;
  }

  &.my-button--sm {
    padding: 7px 16px;
    font-size: 12px;
  }

  &.my-button--xs {
    padding: 5px 12px;
    font-size: 12px;
  }

  & + & {
    margin-left: 10px;
  }

  &.round {
    border-radius: 30px;
  }

  &.disabled {
    cursor: not-allowed;
    &::after {
      content: "";
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: -1px;
      right: -1px;
      background-color: rgba($color: #ffffff, $alpha: 0.4);
    }
  }

  &:not(.disabled):active {
    transform: scale(0.96);
  }

  [class*="my-icon-"] + span {
    margin-left: 5px;
  }

  // 默认按钮
  &.my-button--default {
    color: #7e8299;
    border-color: #e4e6ef;
    background-color: #fff;

    &:not(.disabled):hover {
      color: #7e8299;
      border-color: #e4e6ef;
      background-color: #f5f8fa;
    }
  }

  // 主要按钮
  &.my-button--primary {
    color: #fff;
    border-color: #00b2ff;
    background-color: #00b2ff;

    &:not(.disabled):hover {
      color: #fff;
      border-color: #0098da;
      background-color: #0098da;
    }

    &.outline {
      color: #00b2ff;
      border-color: #00b2ff;
      background-color: #f1faff;
    }

    &.outline:not(.disabled):hover {
      color: #fff;
      border-color: #00b2ff;
      background-color: #00b2ff;
    }
  }

  // 成功按钮
  &.my-button--success {
    color: #fff;
    border-color: #50cd89;
    background-color: #50cd89;

    &:not(.disabled):hover {
      color: #fff;
      border-color: #47be7d;
      background-color: #47be7d;
    }

    &.outline {
      color: #50cd89;
      border-color: #50cd89;
      background-color: #e8fff3;
    }

    &.outline:not(.disabled):hover {
      color: #fff;
      border-color: #50cd89;
      background-color: #50cd89;
    }
  }

  &.my-button--info {
    color: #fff;
    border-color: #7239ea;
    background-color: #7239ea;

    &:not(.disabled):hover {
      color: #fff;
      border-color: #5014d0;
      background-color: #5014d0;
    }

    &.outline {
      color: #7239ea;
      border-color: #7239ea;
      background-color: #f8f5ff;
    }

    &.outline:not(.disabled):hover {
      color: #fff;
      border-color: #7239ea;
      background-color: #7239ea;
    }
  }

  &.my-button--warning {
    color: #fff;
    border-color: #ffc700;
    background-color: #ffc700;

    &:not(.disabled):hover {
      color: #fff;
      border-color: #f1bc00;
      background-color: #f1bc00;
    }

    &.outline {
      color: #ffc700;
      border-color: #ffc700;
      background-color: #fff8dd;
    }

    &.outline:not(.disabled):hover {
      color: #fff;
      border-color: #ffc700;
      background-color: #ffc700;
    }
  }

  &.my-button--danger {
    color: #fff;
    border-color: #f1416c;
    background-color: #f1416c;

    &:not(.disabled):hover {
      color: #fff;
      border-color: #d9214e;
      background-color: #d9214e;
    }

    &.outline {
      color: #f1416c;
      border-color: #f1416c;
      background-color: #fff5f8;
    }

    &.outline:not(.disabled):hover {
      color: #fff;
      border-color: #f1416c;
      background-color: #f1416c;
    }
  }

  &.my-button--dark {
    color: #fff;
    border-color: #181c32;
    background-color: #181c32;

    &:not(.disabled):hover {
      color: #fff;
      border-color: #131628;
      background-color: #131628;
    }

    &.outline {
      color: #181c32;
      border-color: #181c32;
      background-color: #eff2f5;
    }

    &.outline:not(.disabled):hover {
      color: #fff;
      border-color: #181c32;
      background-color: #181c32;
    }
  }
}
</style>
